import { Sendcontracts } from "@/components/form/contracts/send.contracts"
import { FormModal } from "@/components/modal/form.modal"
import customsService from "@/services/customs.service"
import { EditCustoms } from "@/components/form/customs/edit.customs"
import { UploadTemplate } from "@/components/form/customs/upload.template"
import { StoreContext } from "@/store"
import { AsyncModal, OperateRender, IndexRender, ListTable, DateRender } from "@whzhuke/antd"
import { useMobx } from "@whzhuke/mobx"
import { Button, Col, Row, Space, message } from "antd"
import React, { useCallback, useContext } from "react"
import { functionCommon } from "@whzhuke/common"

const customsTestData = [
  { id: 1, contractName: "进口报关-铝材", companyName: "宁波进出口公司", updatedBy: "张三", updateTs: "2024-01-15 10:00:00", createTs: "2024-01-10 09:00:00" },
  { id: 2, contractName: "出口报关-汽配", companyName: "上海汽配集团", updatedBy: "李四", updateTs: "2024-01-20 12:30:00", createTs: "2024-01-15 11:30:00" },
  {
    id: 3,
    contractName: "进口报关-电子件",
    companyName: "深圳科技有限公司",
    updatedBy: "王五",
    updateTs: "2024-02-01 08:45:00",
    createTs: "2024-01-25 16:10:00"
  }
]

const Page = useMobx(() => {
  const { ListStore } = useContext(StoreContext)

  const AddModal = useCallback(async () => {
    const done = await AsyncModal({
      content: FormModal,
      params: {
        formEle: EditCustoms,
        title: "添加合同"
      }
    })
    if (done) {
      ListStore.updateList(customsService.list)
    }
  }, [ListStore])

  const ImportModal = useCallback(async () => {
    const done = await AsyncModal({
      content: FormModal,
      params: {
        formEle: UploadTemplate,
        title: "上传模板"
      }
    })
    if (done) {
      ListStore.updateList(customsService.list)
    }
  }, [ListStore])

  const SendModal = useCallback(
    (item?: any) => async () => {
      const done = await AsyncModal({
        content: FormModal,
        params: {
          formEle: Sendcontracts,
          formProps: {
            values: item,
            service: customsService
          },
          title: "发送合同"
        }
      })
      if (done) {
        ListStore.updateList(customsService.list)
      }
    },
    [ListStore]
  )

  const DownloadModal = useCallback(
    (item?: any) => () => {
      if (!item) {
        message.warning("无法获取合同信息")
        return
      }

      const contractFile = item.contractFile || item.fileUrl || item.file
      if (!contractFile) {
        message.warning("该合同没有文件")
        return
      }

      try {
        const url = functionCommon.replaceHost(contractFile, "public" as any)
        window.open(url, "_blank")
      } catch (error) {
        console.error("下载失败:", error)
        message.error("下载失败，请稍后重试")
      }
    },
    []
  )

  const titleRender = useCallback(() => {
    return (
      <Row justify="space-between" align="middle">
        <Col />
        <Col>
          <Space size="middle">
            <Button type="primary" onClick={ImportModal}>
              上传模板
            </Button>
            <Button type="primary" onClick={AddModal}>
              添加合同
            </Button>
          </Space>
        </Col>
      </Row>
    )
  }, [ImportModal, AddModal])
  return (
    <Row>
      <Col span={24}>
        <ListTable
          title={titleRender}
          apiColumns={[
            IndexRender("id", 80),
            ["contractName", "合同名称"],
            ["companyName", "供应商名称"],
            ["updatedBy", "修改人"],
            ["updateTs", "修改时间"],
            ["createTs", "创建时间", DateRender()],
            [
              "id",
              "操作",
              OperateRender([
                ["下载", DownloadModal],
                ["发送", SendModal]
              ]),
              { width: 120, fixed: "right" }
            ]
          ]}
          apiService={customsService.list}
          // testData={customsTestData}
        />
      </Col>
    </Row>
  )
})

export default Page
